<template>
  <div class="board-view" :style="{ backgroundColor: board?.color || '#026AA7' }">
    <div class="board-header">
      <h1>{{ board?.title }}</h1>
      <div class="board-actions">
        <button @click="showMembers">成员</button>
        <button @click="showMenu">菜单</button>
      </div>
    </div>

    <div class="lists-container">
      <draggable 
        v-model="lists" 
        group="lists"
        class="lists-wrapper"
        @change="onListOrderChange"
      >
        <template #item="{ element: list }">
          <div class="list">
            <div class="list-header">
              <h3>{{ list.title }}</h3>
              <button @click="showListMenu(list)">...</button>
            </div>
            
            <draggable 
              v-model="list.cards" 
              group="cards"
              class="cards-wrapper"
              @change="onCardMove"
            >
              <template #item="{ element: card }">
                <div 
                  class="card"
                  @click="openCardDetail(card)"
                >
                  <div v-if="card.labels?.length" class="card-labels">
                    <span 
                      v-for="label in card.labels"
                      :key="label"
                      class="label"
                      :style="{ backgroundColor: label }"
                    />
                  </div>
                  <p>{{ card.title }}</p>
                  <div class="card-badges">
                    <span v-if="card.dueDate" class="due-date">
                      {{ formatDate(card.dueDate) }}
                    </span>
                    <span v-if="card.attachments?.length" class="attachments">
                      {{ card.attachments.length }}
                    </span>
                  </div>
                </div>
              </template>
            </draggable>

            <button 
              class="add-card"
              @click="showAddCard(list)"
            >
              + 添加卡片
            </button>
          </div>
        </template>
      </draggable>

      <button 
        class="add-list"
        @click="showAddList"
      >
        + 添加列表
      </button>
    </div>

    <CardDetail 
      v-if="selectedCard"
      :card="selectedCard"
      :is-open="!!selectedCard"
      @update:is-open="closeCardDetail"
    />

    <BoardMembers
      v-if="showMembersModal"
      :board="board"
      @close="showMembersModal = false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useBoardStore } from '../stores/board';
import { useCardStore } from '../stores/card';
import draggable from 'vuedraggable';
import CardDetail from '../components/Card/CardDetail.vue';
import BoardMembers from '../../../packages/client/src/components/boards/BoardMembers.vue';

const route = useRoute();
const boardStore = useBoardStore();
const cardStore = useCardStore();

const board = computed(() => boardStore.currentBoard);
const lists = computed({
  get: () => board.value?.lists || [],
  set: (newLists) => {
    boardStore.updateBoard({
      ...board.value,
      lists: newLists
    });
  }
});

const selectedCard = ref(null);
const showMembersModal = ref(false);

onMounted(async () => {
  await boardStore.fetchBoard(route.params.id);
});

const onListOrderChange = async (event) => {
  if (event.moved) {
    await boardStore.updateListOrder({
      boardId: board.value._id,
      oldIndex: event.moved.oldIndex,
      newIndex: event.moved.newIndex
    });
  }
};

const onCardMove = async (event) => {
  if (event.moved) {
    const { element: card, oldIndex, newIndex } = event.moved;
    await cardStore.moveCard({
      cardId: card._id,
      listId: card.listId,
      position: newIndex
    });
  }
};

const openCardDetail = (card) => {
  selectedCard.value = card;
};

const closeCardDetail = () => {
  selectedCard.value = null;
};

const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};
</script>

<style scoped>
.board-view {
  height: 100vh;
  padding: 16px;
  color: white;
}

.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.lists-container {
  display: flex;
  overflow-x: auto;
  height: calc(100vh - 80px);
  padding-bottom: 16px;
}

.lists-wrapper {
  display: flex;
  gap: 8px;
}

.list {
  background: #EBECF0;
  border-radius: 3px;
  width: 272px;
  max-height: 100%;
  color: #172B4D;
  padding: 8px;
}

.cards-wrapper {
  min-height: 10px;
  padding: 4px 0;
}

.card {
  background: white;
  border-radius: 3px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.card-labels {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.label {
  width: 40px;
  height: 8px;
  border-radius: 4px;
}

.card-badges {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: #5E6C84;
}
</style> 